<template>
  <view>
    <view
      id="home"
      class="home-nav acea-row row-center-wrapper"
      :class="opacity > 0.5 ? 'on' : ''"
      :style="{ top: homeTop + 'rpx' }"
      v-if="returnShow"
      @tap="returns"
    >
      <image src="/static/arrow_left.svg" style="width: 24rpx; height: 48rpx" />
    </view>
    <view
      class="fixedtime"
      v-if="missionId_m"
      :style="{ marginTop: homeTop + 'rpx' }"
      ><text v-if="showCountdown">浏览{{ seconds }}秒，</text
      >{{ jdlist.length }}/{{ wcjd.awards[0].view }}</view
    >
    <view class="product-con">
      <scroll-view
        :scroll-top="scrollTop"
        scroll-y="true"
        scroll-with-animation="true"
        :style="'height:' + height + 'px;'"
        @scroll="scroll"
      >
        <view id="past0">
          <productConSwiper :imgUrls="imgUrls"></productConSwiper>
          <view class="nav acea-row row-between-wrapper mb30">
            <view class="money"
              >￥<text class="num">{{ storeInfo.price }}</text
              ><text class="y-money">￥{{ storeInfo.otPrice }}</text></view
            >
            <view class="acea-row row-middle">
              <view class="time" v-if="status == 2">
                <view>距秒杀结束仅剩</view>
                <countDown
                  :bgColor="bgColor"
                  :is-day="false"
                  :tip-text="' '"
                  :day-text="' '"
                  :hour-text="' : '"
                  :minute-text="' : '"
                  :second-text="' '"
                  :datatime="datatime"
                ></countDown>
              </view>
            </view>
          </view>
          <view class="pad30 mb30">
            <view class="wrapper borRadius14 mb30">
              <view class="introduce acea-row row-between">
                <view class="infor"> {{ storeInfo.storeName }}</view>
              </view>
              <view class="label acea-row row-middle">
                <view class="flex-left">类型: 即时秒杀 </view>
                <view class="flex-left"
                  >累计销量:
                  {{
                    parseFloat(storeInfo.sales) + parseFloat(storeInfo.ficti) ||
                    0
                  }}{{ storeInfo.unitName }}</view
                >
                <view class="flex-left"
                  >库存: {{ storeInfo.quota ? storeInfo.quota : 0 }}
                  {{ storeInfo.unitName }}</view
                >
              </view>
            </view>
            <view
              class="label acea-row row-between-wrapper"
              style="padding: 10rpx 20rpx"
            >
              <view class="flex-left"
                >商家: {{ storeInfo.merchant.name }}
              </view>
              <view class="flex-left"
                >收货：{{
                  storeInfo.consumeType == 0
                    ? "物流"
                    : storeInfo.consumeType == 1
                    ? "自提"
                    : ""
                }}</view
              >
              <view class="flex-left">快递: 商家自行处理 </view>
            </view>
            <view
              class="attribute acea-row row-between-wrapper mb30 borRadius14"
              @tap="selecAttr"
              v-if="attribute.productAttr.length"
            >
              <view class="line1"
                >{{ attr }}：<text class="atterTxt">{{ attrValue }}</text></view
              >
              <image
                src="/static/arrow_right.png"
                style="width: 30rpx; height: 30rpx"
              ></image>
            </view>
          </view>
        </view>
        <view class="product-intro" id="past2">
          <view class="title">
            <image class="title-img" src="../../../static/zuo.png"></image>
            <span class="title-txt">产品详情</span>
            <image class="title-img" src="../../../static/you.png"></image>
          </view>
          <view class="conter">
            <jyf-parser
              :html="storeInfo.content"
              ref="article"
              :tag-style="tagStyle"
            ></jyf-parser>
          </view>
        </view>
        <view style="height: 120rpx"></view>
      </scroll-view>
      <view class="footer acea-row row-between-wrapper">
        <view class="share"  v-if="isLogin">
          <image
            src="../../static//share2.svg"
            mode="widthFix"
          ></image>
            <button class="share-btn" open-type="share"></button>
        </view>
        <!-- <view>分享</view> -->
        <view class="bnt acea-row" v-if="dataShow == 0">
          <view class="buy bnts bg-color-hui">立即购买</view>
        </view>
        <view
          class="bnt acea-row"
          v-if="
            status == 2 &&
            attribute.productSelect.quota > 0 &&
            datatime > new Date().getTime() / 1000
          "
        >
          <view class="buy bnts" @tap="goCat">立即购买</view>
        </view>
        <view
          class="bnt acea-row"
          v-if="
            status == 2 &&
            attribute.productSelect.quota <= 0 &&
            datatime > new Date().getTime() / 1000
          "
        >
          <view class="buy bnts bg-color-hui">已售罄</view>
        </view>
        <view class="bnt acea-row" v-if="status == 0">
          <view class="buy bnts bg-color-hui">已关闭</view>
        </view>
        <view class="bnt acea-row" v-if="status == 1">
          <view class="buy bnts bg-color-hui">未开始</view>
        </view>
        <view
          class="bnt acea-row"
          v-if="status == 2 && new Date().getTime() / 1000 - datatime >= 0"
        >
          <view class="buy bnts bg-color-hui">已结束</view>
        </view>
      </view>
    </view>
    <product-window
      :attr="attribute"
      :limitNum="1"
      @myevent="onMyEvent"
      @ChangeAttr="ChangeAttr"
      @ChangeCartNum="ChangeCartNum"
      @attrVal="attrVal"
      @iptCartNum="iptCartNum"
    ></product-window>
  </view>
</template>

<script>
const app = getApp();
import { mapGetters } from "vuex";
import { getSeckillDetail } from "@/api/activity.js";
import {
  getMissionDetailNew,
  getUserViewList,
  postMissionRecord,
} from "@/api/api.js";
import productConSwiper from "@/components/productConSwiper/index.vue";
import productWindow from "@/components/productWindow/index.vue";
import parser from "@/components/jyf-parser/jyf-parser";
import countDown from "@/components/countDown";

export default {
  data() {
    return {
      secords: 0,
      bgColor: {
        bgColor: "#333333",
        Color: "#fff",
        isDay: true,
        width: "44rpx",
        timeTxtwidth: "16rpx",
      },
      dataShow: 0,
      id: 0,
      time: 0,
      countDownHour: "00",
      countDownMinute: "00",
      countDownSecond: "00",
      storeInfo: [],
      imgUrls: [],
      parameter: {
        navbar: "1",
        return: "1",
        title: "抢购详情页",
        color: false,
      },
      attribute: {
        cartAttr: false,
        productAttr: [],
        productSelect: {},
      },
      productValue: [],
      productValueArr: [],
      isOpen: false,
      attr: "已选择",
      attrValue: "",
      status: 1,
      isAuto: false,
      isShowAuth: false,
      iShidden: false,
      limitNum: 1, //限制本属性产品的个数；
      personNum: 0, //限制用户购买的个数；
      iSplus: false,
      navH: "",
      navList: ["商品", "详情"],
      opacity: 0,
      scrollY: 0,
      topArr: [],
      toView: "",
      height: 0,
      heightArr: [],
      lock: false,
      scrollTop: 0,
      tagStyle: {
        img: "width:100%;display:block;",
        table: "width:100%",
        video: "width:100%",
      },
      datatime: 0,
      navActive: 0,
      meunHeight: 0,
      backH: "",
      posters: false,
      weixinStatus: false,
      posterImageStatus: false,
      canvasStatus: false, //海报绘图标签
      storeImage: "", //海报产品图
      PromotionCode: "", //二维码图片
      posterImage: "", //海报路径
      posterbackgd: "/static/images/posterbackgd.png",
      actionSheetHidden: false,
      cart_num: "",
      attrTxt: "",
      qrcodeSize: 600,
      imagePath: "", //海报路径
      imgTop: "",
      H5ShareBox: false, //公众号分享图片
      sharePacket: {
        isState: true, //默认不显示
      },
      buyNum: 1,
      errT: "",
      returnShow: true,
      homeTop: 20,
      userCollect: false,
      seconds: 60, //看商品倒计时
      showCountdown: true, //是否显示倒计时
      interval: null,
      jdlist: [],
      jding: [],
      wcjd: [],
      iftj: false,
    };
  },
  components: {
    productConSwiper,
    productWindow: productWindow,
    "jyf-parser": parser,
    countDown,
  },
  computed: mapGetters(["isLogin", "uid", "chatUrl", "missionId_m"]),
  onLoad(options) {
    let that = this;
    that.$store.commit("PRODUCT_TYPE", "normal");
    //设置商品列表高度
    uni.getSystemInfo({
      success: function (res) {
        that.height = res.windowHeight;
      },
    });

    let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    this.meunHeight = menuButtonInfo.height;
    this.backH = that.navH / 2 + this.meunHeight / 2;

    if (!options.scene && !options.id) {
      this.showSkeleton = false;
      this.$util.Tips(
        {
          title: "缺少参数无法查看商品",
        },
        {
          url: "/pages/index/index",
        }
      );
      return;
    }
    if (options.hasOwnProperty("id") || options.scene) {
      if (options.scene) {
        // 仅仅小程序扫码进入
        let qrCodeValue = this.$util.getUrlParams(
          decodeURIComponent(options.scene)
        );
        let mapeMpQrCodeValue = this.$util.formatMpQrCodeData(qrCodeValue);
        app.globalData.spread = mapeMpQrCodeValue.spread;
        this.id = mapeMpQrCodeValue.id;
        setTimeout(() => {
          spread(mapeMpQrCodeValue.spread)
            .then((res) => {})
            .catch((res) => {});
        }, 2000);
      } else {
        this.id = options.id;
      }
    }

    this.getSeckillDetail();

    this.$nextTick(() => {
      // #ifdef MP
      const menuButton = uni.getMenuButtonBoundingClientRect();
      const query = uni.createSelectorQuery().in(this);
      query
        .select("#home")
        .boundingClientRect((data) => {
          this.homeTop = menuButton.top * 2 + menuButton.height - data.height;
        })
        .exec();
      // #endif
    });
  },
  mounted() {
    this.startCountdown();
  },
  beforeDestroy() {
    this.stopCountdown();
  },
  methods: {
    //用户浏览列表

    startCountdown() {
      if (this.missionId_m) {
        this.iftj = true;
        getMissionDetailNew(this.missionId_m).then((res) => {
          console.log(res);
          this.wcjd = res.data;
        });
        getUserViewList({ missionId: this.missionId_m }).then((res) => {
          this.jdlist = res.data;

          res.data.map((item) => {
            if (item.productId == this.id) {
              this.showCountdown = false;
              this.iftj = false;
              return false;
            }
          });
        });
      }

      this.showCountdown = true; // 显示倒计时
      this.interval = setInterval(() => {
        this.seconds--;
      }, 1000);

      setTimeout(() => {
        this.stopCountdown();
      }, 10000); // 1分钟后停止
    },
    stopCountdown() {
      this.showCountdown = false; // 停止显示倒计时

      clearInterval(this.interval);
      if (this.iftj && this.seconds == 0) {
        postMissionRecord({
          missionId: this.missionId_m,
          productId: this.id,
          uid: this.uid,
        }).then((res) => {
          uni.showToast({
            title: "浏览成功",
            icon: "none",
          });
          this.startCountdown();
        });
      }
    },
    /**
     * 购物车手动填写
     *
     */
    iptCartNum: function (e) {
      this.$set(this.attribute.productSelect, "cart_num", e ? e : 1);
      this.$set(this, "cart_num", e);
      if (e > 1) {
        return this.$util.Tips({
          title: `该商品每次限购1${this.storeInfo.unitName}`,
        });
      }
    },
    // 后退
    returns: function () {
      uni.navigateBack();
    },
    getSeckillDetail: function () {
      let that = this;
      getSeckillDetail(that.id)
        .then((res) => {
          this.dataShow = 1;
          this.storeInfo = res.data.storeSeckill;
          this.userCollect = res.data.userCollect;
          this.status = this.storeInfo.seckillStatus;
          this.datatime = Number(this.storeInfo.timeSwap);
          this.imgUrls = JSON.parse(res.data.storeSeckill.sliderImage) || [];

          this.productValue = res.data.productValue;
          let arr = [];
          // 分开规格和值
          for (let key in res.data.productValue) {
            let obj = {
              label: key,
              value: res.data.productValue[key],
              price: res.data.productValue[key].price,
            };
            arr.push(obj);
          }
          console.log(arr, "arr-old");
          // 按照价格排序
          let newArr = arr.sort((a, b) => {
            return a.price - b.price;
          });
          that.productValueArr = newArr;
          this.personNum = res.data.storeSeckill.quota;
          this.attribute.productAttr = res.data.productAttr;
          this.attribute.productSelect.num = res.data.storeSeckill.num;
          let productAttr = res.data.productAttr.map((item) => {
            return {
              attrName: item.attrName,
              attrValues: item.attrValues.split(",").reverse(),
              id: item.id,
              isDel: item.isDel,
              productId: item.productId,
              type: item.type,
            };
          });
          this.$set(this.attribute, "productAttr", productAttr);
          that.imgTop = res.data.storeSeckill.image;

          that.DefaultSelect();
        })
        .catch((err) => {
          uni.showToast({
            title: JSON.stringify(err),
            icon: "none",
          });
        });
    },
    /**
     * 默认选中属性
     *
     */
    DefaultSelect: function () {
      let self = this;
      let productAttr = self.attribute.productAttr;
      let value = [];
      // let obj = JSON.parse(JSON.stringify(self.productValue))
      // console.log(obj, 'obj-----')
      // for (let key in obj) {
      // 	if (obj[key].stock > 0) {
      // 		value = self.attribute.productAttr.length ? key.split(",") : [];
      // 		break;
      // 	}
      // }
      for (let i = 0; i < self.productValueArr.length; i++) {
        if (self.productValueArr[i].value.quota > 0) {
          value = self.productValueArr[i].label.split(",");
          break;
        }
      }
      console.log(value, "value----");
      for (let i = 0; i < productAttr.length; i++) {
        this.$set(productAttr[i], "index", value[i]);
      }
      //sort();排序函数:数字-英文-汉字；
      let productSelect = this.productValue[value.join(",")];
      if (productSelect && productAttr.length) {
        self.$set(
          self.attribute.productSelect,
          "storeName",
          self.storeInfo.storeName
        );
        self.$set(self.attribute.productSelect, "image", productSelect.image);
        self.$set(self.attribute.productSelect, "price", productSelect.price);
        self.$set(self.attribute.productSelect, "stock", productSelect.stock);
        self.$set(self.attribute.productSelect, "unique", productSelect.id);
        self.$set(self.attribute.productSelect, "quota", productSelect.quota);
        self.$set(
          self.attribute.productSelect,
          "quotaShow",
          productSelect.quotaShow
        );
        self.$set(self.attribute.productSelect, "cart_num", 1);
        self.$set(self, "attrValue", value.join(","));
        this.$set(self, "attrTxt", "已选择");
        self.attrValue = value.join(",");
      } else if (!productSelect && productAttr.length) {
        self.$set(
          self.attribute.productSelect,
          "storeName",
          self.storeInfo.storeName
        );
        self.$set(self.attribute.productSelect, "image", self.storeInfo.image);
        self.$set(self.attribute.productSelect, "price", self.storeInfo.price);
        self.$set(self.attribute.productSelect, "quota", 0);
        self.$set(self.attribute.productSelect, "quota", 0);
        self.$set(self.attribute.productSelect, "stock", 0);
        self.$set(self.attribute.productSelect, "unique", "");
        self.$set(self.attribute.productSelect, "cart_num", 0);
        self.$set(self, "attrValue", "");
        self.$set(self, "attrTxt", "已选择");
      } else if (!productSelect && !productAttr.length) {
        self.$set(
          self.attribute.productSelect,
          "storeName",
          self.storeInfo.storeName
        );
        self.$set(self.attribute.productSelect, "image", self.storeInfo.image);
        self.$set(self.attribute.productSelect, "price", self.storeInfo.price);
        self.$set(self.attribute.productSelect, "quota", self.storeInfo.quota);
        self.$set(
          self.attribute.productSelect,
          "quotaShow",
          self.storeInfo.quotaShow
        );
        self.$set(self.attribute.productSelect, "stock", self.storeInfo.stock);
        self.$set(self.attribute.productSelect, "unique", "");
        self.$set(self.attribute.productSelect, "cart_num", 1);
        self.$set(self, "attrValue", "");
        self.$set(self, "attrTxt", "已选择");
      }
    },
    selecAttr: function () {
      this.attribute.cartAttr = true;
    },
    onMyEvent: function () {
      this.$set(this.attribute, "cartAttr", false);
      this.$set(this, "isOpen", false);
    },
    /**
     * 购物车数量加和数量减
     *
     */
    ChangeCartNum: function (changeValue) {
      //changeValue:是否 加|减
      //获取当前变动属性
      let productSelect = this.productValue[this.attrValue];
      if (this.cart_num) {
        productSelect.cart_num = this.cart_num;
        this.attribute.productSelect.cart_num = this.cart_num;
      }
      //如果没有属性,赋值给商品默认库存
      if (productSelect === undefined && !this.attribute.productAttr.length)
        productSelect = this.attribute.productSelect;
      //无属性值即库存为0；不存在加减；
      if (productSelect === undefined) return;
      let stock = productSelect.stock || 0;
      let quota = productSelect.quota || 0;
      let num = this.attribute.productSelect;
      let nums = this.storeInfo.num || 0;
      //设置默认数据
      if (productSelect.cart_num == undefined) productSelect.cart_num = 1;
      if (changeValue) {
        if (num.cart_num === 1) {
          return this.$util.Tips({
            title: `该商品每次限购1${this.storeInfo.unitName}`,
          });
        }
        num.cart_num++;
        let arrMin = [];
        arrMin.push(nums);
        arrMin.push(quota);
        arrMin.push(stock);
        let minN = Math.min.apply(null, arrMin);
        if (num.cart_num >= minN) {
          this.$set(this.attribute.productSelect, "cart_num", minN ? minN : 1);
          this.$set(this, "cart_num", minN ? minN : 1);
        }
        this.$set(this, "cart_num", num.cart_num);
        this.$set(this.attribute.productSelect, "cart_num", num.cart_num);
      } else {
        num.cart_num--;
        if (num.cart_num < 1) {
          this.$set(this.attribute.productSelect, "cart_num", 1);
          this.$set(this, "cart_num", 1);
        }
        this.$set(this, "cart_num", num.cart_num);
        this.$set(this.attribute.productSelect, "cart_num", num.cart_num);
      }
    },
    attrVal(val) {
      this.attribute.productAttr[val.indexw].index =
        this.attribute.productAttr[val.indexw].attrValues[val.indexn];
    },
    /**
     * 属性变动赋值
     *
     */
    ChangeAttr: function (res) {
      this.$set(this, "cart_num", 1);
      let productSelect = this.productValue[res];
      if (productSelect) {
        this.$set(this.attribute.productSelect, "image", productSelect.image);
        this.$set(this.attribute.productSelect, "price", productSelect.price);
        this.$set(this.attribute.productSelect, "stock", productSelect.stock);
        this.$set(this.attribute.productSelect, "unique", productSelect.id);
        this.$set(this.attribute.productSelect, "cart_num", 1);
        this.$set(this.attribute.productSelect, "quota", productSelect.quota);
        this.$set(
          this.attribute.productSelect,
          "quotaShow",
          productSelect.quotaShow
        );
        this.$set(this, "attrValue", res);
        this.attrTxt = "已选择";
      } else {
        this.$set(this.attribute.productSelect, "image", this.storeInfo.image);
        this.$set(this.attribute.productSelect, "price", this.storeInfo.price);
        this.$set(this.attribute.productSelect, "stock", 0);
        this.$set(this.attribute.productSelect, "unique", "");
        this.$set(this.attribute.productSelect, "cart_num", 0);
        this.$set(this.attribute.productSelect, "quota", 0);
        this.$set(this.attribute.productSelect, "quotaShow", 0);
        this.$set(this, "attrValue", "");
        this.attrTxt = "已选择";
      }
    },
    scroll: function (e) {
      var that = this,
        scrollY = e.detail.scrollTop;
      var opacity = scrollY / 200;
      opacity = opacity > 1 ? 1 : opacity;
      that.opacity = opacity;
      that.scrollY = scrollY;
      if (that.lock) {
        that.lock = false;
        return;
      }
      for (var i = 0; i < that.topArr.length; i++) {
        if (
          scrollY <
          that.topArr[i] - app.globalData.navHeight / 2 + that.heightArr[i]
        ) {
          that.navActive = i;
          break;
        }
      }
    },
    /*
     *  单独购买
     */
    openAlone: function () {
      uni.navigateTo({
        url: "/subpageB/good_detail/good_detail?id=" + this.storeInfo.productId,
      });
    },
    /*
     *  下订单
     */
    goCat: function () {
      if (!this.isLogin) {
        toLogin();
        return;
      }
      var that = this;
      var productSelect = this.productValue[this.attrValue];
      var productSelect = this.productValue[this.attrValue];
      if (that.cart_num > 1) {
        return this.$util.Tips({
          title: `该商品每人限购1${this.storeInfo.unitName}`,
        });
      }
      //打开属性
      if (this.isOpen) this.attribute.cartAttr = true;
      else this.attribute.cartAttr = !this.attribute.cartAttr;
      //只有关闭属性弹窗时进行加入购物车
      if (this.attribute.cartAttr === true && this.isOpen == false)
        return (this.isOpen = true);
      //如果有属性,没有选择,提示用户选择
      if (
        this.attribute.productAttr.length &&
        productSelect === undefined &&
        this.isOpen == true
      )
        return app.$util.Tips({
          title: "已选择属性",
        });

      this.$Order.getPreOrder("buyNow", [
        {
          attrValueId: parseFloat(this.attribute.productSelect.unique),
          seckillId: parseFloat(this.id),
          productNum: parseFloat(
            this.cart_num
              ? this.cart_num
              : this.attribute.productSelect.cart_num
          ),
          productId: parseFloat(this.storeInfo.productId),
        },
      ]);
    },
  },
  onShareAppMessage() {
    let that = this;
    return {
      title: '秒杀' + that.storeInfo.storeName,
      path: '/subpageC/seckill_detail/seckill_detail?id=' + that.storeInfo.id,
      imageUrl: that.storeInfo.image,
    };
  },
};
</script>


<style scoped lang="scss">
.share {
  width: 60rpx;
        height: 60rpx;
      position: relative;
      display: flex;
      &-img {
        width: 60rpx;
        height: 60rpx;
      }
      &-btn {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
      }
    }
.flex-left {
  flex: 1;
  text-align: left;
  font-size: 24rpx;
  color: #82848f;
}
.jindu {
  position: fixed;
  right: 20rpx;
  bottom: 150rpx;
  z-index: 999;
  width: 100rpx;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
}

.fixedtime {
  position: fixed;
  top: 100rpx;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  z-index: 999;
  left: 0;
  padding: 20rpx;
  border-radius: 0 40rpx 40rpx 0;
}

.attribute {
  width: 100%;
  padding: 10rpx 20rpx;
  .line1 {
    width: 600rpx;
    font-size: 26rpx;
    color: #000;
  }
}
.share-box {
  z-index: 1000;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  image {
    width: 100%;
    height: 100%;
  }
}
.generate-posters {
  width: 100%;
  height: 170rpx;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
  transform: translate3d(0, 100%, 0);
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  border-top: 1rpx solid #eee;
}

.generate-posters.on {
  transform: translate3d(0, 0, 0);
}

.generate-posters .item {
  flex: 50%;
  text-align: center;
  font-size: 30rpx;
}

.generate-posters .item .iconfont {
  font-size: 80rpx;
  color: #5eae72;
}

.generate-posters .item .iconfont.icon-haibao {
  color: #5391f1;
}

.navbar .header {
  height: 96rpx;
  font-size: 30rpx;
  color: #050505;
  background-color: #fff;
  /* #ifdef MP */
  padding-right: 95rpx;
  /* #endif */
}

.title {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 20rpx;
  &-img {
    width: 208rpx;
    height: 8rpx;
  }
  &-txt {
    font-size: 30rpx;
    color: #050505;
    margin: 0 30rpx;
    flex: 1;
    text-align: center;
  }
}

.navbar .header .item {
  position: relative;
  margin: 0 25rpx;
}

.navbar .header .item.on:before {
  position: absolute;
  width: 60rpx;
  height: 5rpx;
  background-repeat: no-repeat;
  content: "";
  background-image: linear-gradient(to right, #ff3366 0%, #ff6533 100%);
  bottom: -10rpx;
  left: 50%;
  margin-left: -28rpx;
}

.navbar {
  position: fixed;
  background-color: #fff;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
}

.navbar .navbarH {
  position: relative;
}

.navbar .navbarH .navbarCon {
  position: absolute;
  bottom: 0;
  height: 100rpx;
  width: 100%;
}

.icon-xiangzuo {
  color: #000;
  position: fixed;
  font-size: 40rpx;
  width: 100rpx;
  height: 56rpx;
  line-height: 54rpx;
  z-index: 1000;
  left: 33rpx;
}

.product-con .nav {
  background-image: url("");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 110rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  background-color: #e93323;
}

.product-con .nav .money {
  font-size: 28rpx;
  color: #fff;
}

.product-con .nav .money .num {
  font-size: 48rpx;
}

.product-con .nav .money .y-money {
  font-size: 26rpx;
  margin-left: 10rpx;
  text-decoration: line-through;
}

.product-con .nav .time {
  font-size: 20rpx;
  color: #fff;
  text-align: center;
}

.product-con .nav .time .timeCon {
  margin-top: 10rpx;
}

.product-con .nav .time .timeCon .num {
  padding: 0 7rpx;
  font-size: 22rpx;
  color: #ff3d3d;
  background-color: #fff;
  border-radius: 2rpx;
}

.product-con .nav .timeState {
  font-size: 28RPX;
  color: #fff;
}

.product-con .nav .iconfont {
  color: #fff;
  font-size: 30rpx;
  margin-left: 20rpx;
}

.product-con .wrapper .introduce {
  margin: 0;
}

.product-con .wrapper .introduce .infor {
  width: 100%;
  padding: 10rpx 20rpx;
  font-family: PingFang SC;
  font-size: 32rpx;
  font-style: normal;
  font-weight: 500;
  color: #000;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

.product-con .wrapper .introduce .iconfont {
  font-size: 36rpx;
  color: #999999;
}

.product-con .wrapper .label {
  font-size: 24rpx;
  color: #82848f;
  width: 100%;
  padding: 10rpx 20rpx;
}

.product-con .wrapper .label .stock {
  width: 255rpx;
  margin-right: 28rpx;
}

.product-con .footer {
  padding: 0 20rpx 0 30rpx;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  height: 100rpx;
  background-color: #fff;
  z-index: 99;
  border-top: 1rpx solid #f0f0f0;
  text-align: center;
}

.product-con .footer .item {
  font-size: 18rpx;
  color: #666;
}

.product-con .footer .item .iconfont {
  text-align: center;
  font-size: 40rpx;
}

.product-con .footer .item .iconfont.icon-shoucang1 {
  color: #f00;
}

.product-con .footer .item .iconfont.icon-gouwuche1 {
  font-size: 40rpx;
  position: relative;
}

.product-con .footer .item .iconfont.icon-gouwuche1 .num {
  color: #fff;
  position: absolute;
  font-size: 18rpx;
  padding: 2rpx 8rpx 3rpx;
  border-radius: 200rpx;
  top: -10rpx;
  right: -10rpx;
}

.product-con .footer .bnt {
  flex: 1;
  justify-content: space-evenly;
  margin-left: 40rpx;
  height: 76rpx;
}

.product-con .footer .bnt .bnts {
  width: 100%;
  text-align: center;
  line-height: 76rpx;
  color: #fff;
  font-size: 28rpx;
}

.product-con .footer .bnt .joinCart {
  border-radius: 50rpx;
  background-image: linear-gradient(to right, #fea10f 0%, #fa8013 100%);
}

.product-con .footer .bnt .buy {
  border-radius: 50rpx;
  background-image: linear-gradient(to right, #fa6514 0%, #e93323 100%);
}

.setCollectBox {
  font-size: 18rpx;
  color: #666;
}

.bg-color-hui {
  background: #bbbbbb !important;
}
.canvas {
  position: fixed;
  z-index: -5;
  opacity: 0;
}

.poster-pop {
  width: 450rpx;
  height: 714rpx;
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  top: 50%;
  margin-top: -357rpx;
}

.poster-pop image {
  width: 100%;
  height: 100%;
  display: block;
}

.poster-pop .close {
  width: 46rpx;
  height: 75rpx;
  position: fixed;
  right: 0;
  top: -73rpx;
  display: block;
}

.poster-pop .save-poster {
  background-color: #df2d0a;
  font-size: ：22rpx;
  color: #fff;
  text-align: center;
  height: 76rpx;
  line-height: 76rpx;
  width: 100%;
}

.poster-pop .keep {
  color: #fff;
  text-align: center;
  font-size: 25rpx;
  margin-top: 10rpx;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9;
}
.home-nav {
  /* #ifdef H5 */
  top: 20rpx !important;
  /* #endif */
}

.home-nav {
  color: #fff;
  position: fixed;
  font-size: 33rpx;
  width: 56rpx;
  height: 56rpx;
  z-index: 999;
  left: 33rpx;
  background: rgba(190, 190, 190, 0.5);
  border-radius: 50%;
  &.on {
    background: unset;
    color: #333;
  }
}

.home-nav .line {
  width: 1rpx;
  height: 24rpx;
  background: rgba(255, 255, 255, 0.25);
}

.home-nav .icon-xiangzuo {
  width: auto;
  font-size: 28rpx;
}
</style>
